<template>
  <el-card class="patient-header" shadow="hover">
    <template #header>
      <div class="card-header">
        <span class="title">患者详情</span>
      </div>
    </template>
    <el-descriptions :column="3" border>
      <el-descriptions-item label="姓名">{{ patientInfo.name }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ patientInfo.gender }}</el-descriptions-item>
      <el-descriptions-item label="年龄">{{ patientInfo.age }}</el-descriptions-item>
      <el-descriptions-item label="身份证">{{ patientInfo.idCard }}</el-descriptions-item>
      <el-descriptions-item label="电话">{{ patientInfo.phone }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{ patientInfo.address }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 患者基本信息
const patientInfo = ref({
  id: 1,
  name: '张华明',
  gender: '男',
  age: 36,
  idCard: '330102198805156789',
  phone: '13812345678',
  address: '浙江省杭州市西湖区文三路123号',
  type: '初诊',
  department: '普外科',
  status: '等待中',
  appointmentTime: '2024/04/04 08:15'
})
</script>

<style scoped lang="scss">
.patient-header {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .title {
      font-size: 18px;
      font-weight: 600;
    }
  }
}
</style>